<template>
  <view class="login-container">


    <!-- 欢迎登录文字 -->
    <view class="welcome-text">欢迎登录</view>

    <!-- 登录按钮区域 -->
    <view class="login-buttons">
      <button class="wechat-btn" @click="wechatLogin">
        <image src="/static/icons/wechat.png" mode="aspectFit" class="wechat-icon"></image>
        <text>微信授权登录</text>
      </button>
      <!--TODO: 手机号登录暂不支持 
      
      <view class="divider">
        <view class="line"></view>
        <text>或</text>
        <view class="line"></view>
      </view>
      
      <button class="phone-btn" @click="phoneLogin">
        手机号登录
      </button>
      -->
    </view>

    <!-- 底部协议 -->
    <view class="agreement">
      <checkbox :checked="isAgree" @tap="toggleAgreement" class="agreement-checkbox"></checkbox>
      <text class="agreement-text">
        已阅读并同意
        <text class="agreement-link" @tap="openAgreement">《服务协议》</text>
      </text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { userApi } from '@/utils/api';

const isAgree = ref(false);
const isLoading = ref(false);

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 切换协议同意状态
const toggleAgreement = () => {
  isAgree.value = !isAgree.value;
};

// 打开服务协议
const openAgreement = () => {
  // 跳转到服务协议页面
  uni.navigateTo({
    url: '/pages/agreement/agreement'
  });
};

// 微信登录
const wechatLogin = () => {
  if (!isAgree.value) {
    uni.showToast({
      title: '请先同意服务协议',
      icon: 'none'
    });
    return;
  }
  
  isLoading.value = true;
  uni.login({
    provider: 'weixin',
    success: async (res) => {
      if (res.code) {
       
          const loginRes = await userApi.login({ code: res.code,referrer_id:uni.getStorageSync('referrer_id')?? 0 });
          
          // 保存token
          uni.setStorageSync('token', loginRes.data.token);
          
          // 获取并保存用户信息
          const userInfo = await userApi.getUserInfo();
          uni.setStorageSync('userInfo', userInfo.data);
          // 提示登录成功
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          });
          
          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            // 返回上一页，如果没有上一页则跳转到首页
            const pages = getCurrentPages();
            if (pages.length > 1) {
              uni.navigateBack();
            } else {
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          }, 1500);
          
       
      }
    },
    fail: (err) => {
      console.error('微信登录失败:', err);
      uni.showToast({
        title: '微信登录失败，请重试',
        icon: 'none'
      });
    },
    complete: () => {
      isLoading.value = false;
    }
  });
};

// 手机号登录
const phoneLogin = () => {
  if (!isAgree.value) {
    uni.showToast({
      title: '请先同意服务协议',
      icon: 'none'
    });
    return;
  }
  
  uni.navigateTo({
    url: '/pages/mine/phoneLogin'
  });
};
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8f7f7 0%, #ffffff 50%);
  padding: 0;
  display: flex;
  flex-direction: column;
}

.back-icon {
  padding: 20rpx;
  margin-left: -20rpx;
}

.nav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 36rpx;
  font-weight: 500;
}

.right-menu {
  display: flex;
  gap: 30rpx;
}

.welcome-text {
  font-size: 48rpx;
  font-weight: bold;
  padding: 40rpx 0;
  text-align: center;
  margin-bottom: 40rpx;
}

.login-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
  padding: 0 40rpx;
  flex: 1;
  justify-content: center;
}

.wechat-btn {
  width: 100%;
  height: 96rpx;
  background: #3dc07c;
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 48rpx;
  border: none;
  box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2);
}

.wechat-icon {
  width: 44rpx;
  height: 44rpx;
  margin-right: 16rpx;
}

.divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 48rpx 0;
}

.divider .line {
  flex: 1;
  height: 1px;
  background: #E5E5E5;
}

.divider text {
  color: #999;
  font-size: 28rpx;
  margin: 0 24rpx;
}

.phone-btn {
  width: 100%;
  height: 96rpx;
  background: #FFFFFF;
  color: #07C160;
  font-size: 32rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 48rpx;
  border: 2rpx solid #07C160;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.agreement {
  position: relative;
  padding: 60rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.agreement-checkbox {
  transform: scale(0.7);
}

.agreement-text {
  font-size: 24rpx;
  color: #666;
}

.agreement-link {
  color: #00C389;
}

/* 按钮点击效果 */
.wechat-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.phone-btn:active {
  transform: scale(0.98);
  opacity: 0.8;
  background: rgba(7, 193, 96, 0.05);
}

/* 移除按钮默认样式 */
button::after {
  border: none;
}

/* 适配暗黑模式 */
@media (prefers-color-scheme: dark) {
  .phone-btn {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(7, 193, 96, 0.8);
  }
  
  .divider .line {
    background: rgba(229, 229, 229, 0.2);
  }
}
</style>
